<template>
  <div class="count">
    <template v-for="(item, index) in communityList">
      <el-card :key="index" class="count_card" shadow="hover">
        <div class="card_top">
          <p>{{ item.name }}</p>
          <el-radio-group
            v-model="item.radio"
            size="medium"
            @change="enterSystem"
            class="radio"
          >
            <el-radio-button label="角色A" class="radio"></el-radio-button>
            <el-radio-button label="角色B" class="radio"></el-radio-button>
            <el-radio-button label="角色C" class="radio"></el-radio-button>
          </el-radio-group>
        </div>
      </el-card>
    </template>
  </div>
</template>
<script>
export default {
  data() {
    return {
      communityList: [
        {
          name: '碧桂园小区',
          radio: ''
        },
        {
          name: '八里湖小区',
          radio: ''
        },
        {
          name: '怡和苑小区',
          radio: ''
        }
      ],
    }
  },
  methods: {
    enterSystem() {
      this.$message.success('进入系统成功')
      this.$router.push('/center/welcome')
    }
  }
}
</script>
<style lang="less" scoped>
.count {
  width: 100%;
  height: 300px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  margin-top: 10%;
}
.count_card {
  width: 28%;
  height: 100%;
  border: none;
  box-shadow: 5px 5px 5px #eee;
}
.count_card /deep/ .el-card__body {
  padding: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: bisque;
}
.card_top p {
  font-size: 20px;
}
.card_top {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
.el-button {
  margin-top: 30px;
}
.radio /deep/ .el-radio-button__inner {
  border-radius: 4px;
  border:1px solid #ccc;
  background: rgba(233, 145, 86, 0.877);
  color:#eee;
}


</style>
